$mini-paper-container-top-position: 4.75rem;
$mini-paper-container-right-position: 17.5rem;
$mini-paper-container-right-expanded-position: 2rem;
$transition: 0.3s;

.mini-paper-container {
  top: $mini-paper-container-top-position;
  right: $mini-paper-container-right-position;
  z-index: 2;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  border: 1px solid $border-color;
  cursor: pointer;

  .mini-paper {
    pointer-events: none;
  }

  &.expanded {
    right: $mini-paper-container-right-expanded-position;
  }

  &.closed {
    opacity: 0;
    visibility: hidden;
    transition: opacity $transition ease-out, visibility $transition ease-out;
  }

  &.opened {
    visibility: visible;
    opacity: 1;
    transition-property: visibility, opacity, right;
    transition-duration: $transition;
    transition-timing-function: ease-in, ease-in, linear;
  }
}
